import React, { useRef, useEffect } from 'react'
import axios from 'axios'
import qs from 'qs'
//axios.defaults.baseURL="/user/"
//axios.defaults.withCredentials=true
import { Form, Input, Button, Checkbox, Row, Col, Radio, message, Tabs } from 'antd';
//import {FormInstance} from 'antd/lib/form'
//父组件通过this.refs获取子组件的props
//子组件通过接收父组件传过来的参数this 获取props
//父组件通过传过去回调函数 包含state 可以改变state状态
//回调函数 还可以接收子组件的参数传给父组件
//useref useeffect如果有删除就return usestate这些是函数组件
//withrouter给组件注入路由信息
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
const tailLayout = {
    wrapperCol: { offset: 8, span: 20 },
  };
  
  const Demo = () => {
   
}
const onFinish = values => {
    console.log('Success:', values);
  };

  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };
const {TabPane}=Tabs
function Phone(props){
    const form=useRef()
    const hello="hello world"
    const open=function(){
        message.info(hello)
    }
    useEffect(x=>{
        console.log(form)
    })
    return  <Form
    ref={form}
    >
        <Form.Item
        label="手机号"
        name="phone"
        rules={[{required:true,message:"输入手机号"}]}
        >
            <Input/>
        </Form.Item>
        <Form.Item
        label="验证码"
        name="yzm"
        rules={[{required:true,message:"输入验证码"}]}
        >
            <Input.Password />
        </Form.Item>
        <Form.Item>
            <button type="submit">提交</button>
            <button onClick={open}>点击</button>
        </Form.Item>
    </Form>
}
class Deng extends React.Component
{
    
    constructor(){
        super()        
        this.state={
          url:""
        }
    } 
    
    but(){
        console.log(this.refs.form.getFieldValue('username'))
    }
    componentDidMount(){
      axios.get("http://localhost:4000/user/details").then((x)=>{
        console.log(x.data)
      })
      // axios.get("details").then((x)=>{
      //   console.log(x.data)
      // })
      const data={
        user:"liu",
        pass:"1234"
      }
      const header={
        headers:{
          "Content-Type":"application/x-www-form-urlencoded"
        }
      }
      axios.post("http://localhost:4000/user/details",qs.stringify(data),header).then((x)=>{
        console.log(x.data)
      })
      // axios.post("details",qs.stringify(data),header).then((x)=>{
      //   console.log(x.data)
      // })
    }
    change(e){
      console.log(e.target.files[0])
      const file=new FormData();
      file.append("img",e.target.files[0])
      const header={
        headers:{
          "Content-Type":"multipart/form-data"
        }
      }
      axios.post("http://localhost:4000/user/upload",file,header).then((x)=>{
        console.log(x.data)
        this.setState({
          url:x.data.url
        })
      })
      // axios.post("upload",file,header).then((x)=>{
      //   console.log(x.data)
      //   this.setState({
      //     url:x.data.url
      //   })
      // })
    }
    render(){
        return (
           <Row>
               <Col push={6} span={6}>
               <Tabs defaultActiveKey>
                   <TabPane tab="账号登录" key="a">
                       
              <Form   
                   ref="form"          
              >
                <Form.Item
                  label="Username"
                  name="username"
                  rules={[{ required: true, message: 'Please input your username!' }]}
                >
                  <Input />
                </Form.Item>
          
                <Form.Item
                  label="Password"
                  name="password"
                  rules={[{ required: true, message: 'Please input your password!' }]}
                >
                  <Input.Password />
                </Form.Item>
          
                <Form.Item {...tailLayout} name="remember" valuePropName="checked">
                  <Checkbox>Remember me</Checkbox>
                </Form.Item>
          
                <Form.Item {...tailLayout}>
                  <Button type="primary" htmlType="submit">
                    Submit
                  </Button>
                  <button onClick={this.but.bind(this)}>点击</button>
                </Form.Item>
                <Form.Item>


                  <input type="file" onChange={this.change.bind(this)} name="file"/>
                  <img width="100px" height="100px" src={this.state.url} alt="加载"/>

                   <Radio.Group defaultValue="a" onChange={x=>{
                       message.info(x.target.value)
                   }}>
                       <Radio.Button value="a">beijing</Radio.Button>
                       <Radio.Button value="b">shanghai</Radio.Button>
                       <Radio.Button value="c">hangzhou</Radio.Button>
                       <Radio.Button value="d">tianjin</Radio.Button>
                   </Radio.Group>
                </Form.Item>
              </Form>
                   </TabPane>
                   <TabPane tab="手机登录" key="b">
                       b
                      <Phone/>
                   </TabPane>
               </Tabs>
               </Col>
           </Row>
          );
    }

   
      
    
}
export default Deng